<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

interface FAQProps {
  question: string;
  answer: string;
  value: string;
}

const FAQList: FAQProps[] = [
    {
        question: "和手动的有什么区别?",
        answer: "1.手动迁移容易操作失误.2.手动需要强登对方账号3.手动迁移会丢失云元素库4.手动迁移可能会丢失uuid,不稳定5.还可以丢失代码,应用保存失败丢失",
        value: "item-0",
    },
  {
    question: "能免费试用吗?",
    answer: "新用户注册后赠送5元,可免费迁移一次应用.",
    value: "item-1",
  },
  {
    question: "迁移后有元素吗?",
    answer:
      "迁移是原样复制, 元素库和代码都存在. 不需要重新捕获",
    value: "item-2",
  },
  {
    question:
      "云元素库可以迁移成功吗?",
    answer:
      "可以的,只有大杯和超大杯支持或按次购买.",
    value: "item-3",
  },
  {
    question: "什么样的会迁移失败?",
    answer: "高级指令(官方没有明确说什么是高级指令)和企业版的会迁移失败.",
    value: "item-4",
  },
  {
    question:
      "迁移后编辑时的代码和运行的不一致?",
    answer: "对方使用了应用加密,把源代码混淆了.没办法解决,请直接联系原作者",
    value: "item-5",
  },
];
</script>

<template>
  <section
    id="faq"
    class="container md:w-[700px] py-24 sm:py-32"
  >
    <div class="text-center mb-8">
      <h2 class="text-lg text-primary text-center mb-2 tracking-wider">FAQS</h2>

      <h2 class="text-3xl md:text-4xl text-center font-bold">
        常见问题
      </h2>
    </div>

    <Accordion
      type="single"
      collapsible
      class="AccordionRoot"
    >
      <AccordionItem
        v-for="{ question, answer, value } in FAQList"
        :key="value"
        :value="value"
      >
        <AccordionTrigger class="text-left"> {{ question }} </AccordionTrigger>

        <AccordionContent>{{ answer }}</AccordionContent>
      </AccordionItem>
    </Accordion>

<!--    <h3 class="font-medium mt-4">-->
<!--      Still have questions?-->
<!--      <a-->
<!--        href="#"-->
<!--        class="text-muted-foreground"-->
<!--      >-->
<!--        <a-->
<!--          href="#"-->
<!--          class="underline"-->
<!--          >Contact us</a-->
<!--        >-->
<!--      </a>-->
<!--    </h3>-->
  </section>
</template>
